<template>
  <div class="h-96">
    <div class="footer_top">
      <div class="footer_top_concent">预约维修服务</div>
      <div class="footer_top_concent">7天无理由退换货</div>
      <div class="footer_top_concent">15天免费换货</div>
      <div class="footer_top_concent">满69元包邮</div>
      <div class="footer_top_concent lastdiv">1100余家售后网点</div>
    </div>
    <div class="footer_bottom">
      <div>
        <span class="smalltitle">选购指南</span>
        <span>手机</span>
        <span>电视</span>
        <span>笔记本</span>
        <span>平板</span>
        <span>穿戴</span>
        <span>耳机</span>
        <span>家电</span>
        <span>路由器</span>
        <span>音箱</span>
        <span>配件</span>
      </div>
      <div>
        <span class="smalltitle">服务中心</span>
        <span>申请售后</span>
        <span>售后政策</span>
        <span>维修服务价格</span>
        <span>订单查询</span>
        <span>以旧换新</span>
        <span>宝钻该服务</span>
        <span>防伪查询</span>
        <span>F吗通道</span>
      </div>
      <div>
        <span class="smalltitle">线下门店</span>
        <span>小米之家</span>
        <span>服务站点</span>
        <span>授权体验店</span>
      </div>
      <div>
        <span class="smalltitle">关于小米</span>
        <span>了解小米</span>
        <span>加入小米</span>
        <span>投资者关系</span>
        <span>环境、社会及管理</span>
        <span>廉洁举报</span>
      </div>
      <div>
        <span class="smalltitle">关注我们</span>
        <span>新浪微博</span>
        <span>官方微信</span>
        <span>练习我们</span>
        <span>公益基金会</span>
      </div>
      <div class="phone">
        <div class="text-xl text-amber-500">400-100-5678</div>
        <div>8:00-18:00（仅收市话费）</div>
        <div class="rgkf">人工客服</div>
      </div>
    </div>

    <div class="laster">
      商城版权所有 © 2012-2021
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "footerFooter",
};
</script>

<script lang="ts" setup></script>

<style scoped>
.footer_top {
  display: flex;
  width: 1200px;
  margin: 0 auto;
  font-size: 16px;
  /* justify-content: space-evenly; */
  padding-top: 30px;
  height: 80px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.footer_top_concent {
  width: 240px;
  border-right: 1px solid #aaa;
  /* border: 1px solid red; */
  height: 25px;
  line-height: 25px;
  text-align: center;
  padding: 0 30px;
}
.lastdiv {
  border: none;
}
.footer_bottom {
  display: flex;
  width: 1200px;
  margin: 0 auto;
  justify-content: space-evenly;
}
.footer_bottom > div {
  display: flex;
  flex-direction: column;
  /* border: 1px solid red; */
  font-size: 12px;
  color: #333;
  margin: 50px 0;
}

.footer_bottom > div span {
  margin-bottom: 10px;
}
.smalltitle {
  font-size: 14px;
  margin: 20px 0 !important;
}
.phone {
  height: 100px !important;
  margin: 60px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-left: 1px solid #aaa;
  padding-left: 50px;
}
.rgkf {
  color: rgb(243, 129, 8);
  width: 100px;
  height: 30px;
  border: 1px solid rgb(202, 107, 5);
  text-align: center;
  line-height: 30px;
  margin-top: 15px;
}
.rgkf:hover {
  background-color: rgb(202, 107, 5);
  color: #fff;
}
.laster {
  background-color: #ccc;
  width: 100%;
  text-align: center;
  line-height: 80px;
  height: 80px;
}
</style>
